<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>WebSite CRUD</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div style="width:1300px;margin:20px auto;text-align: center">
    <table align='center'  border='1'  cellspacing='0'>  
        <tr>            
            <td>序号</td>
            <td>网站地址</td>
            <td>操作</td>
        </tr>
        <tr th:each="d:${data}">   
            <td th:text="${d.id}"></td>
            <td><a th:text="${d.url}" th:href="${d.url}"></a></td>
            <td><button th:id="${d.id}" onclick="delWebsite(this)" type="submit">删除</button></td>

        </tr>
    </table>
    <br/>
    <br/> 
    网站地址: <input id="website" name="website"></input>
    <button onclick="addWebsite(this)" type="submit">新增</button>
</div>
</body>
</html>
<script type="text/javascript">
    function addWebsite(obj) {
        var url = $('#website').val();
        var data = {
            url: url
        };
        $.ajax({
            type: 'post',
            url: "/website",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function () {
                window.location.reload();
                alert("新增成功");
            },
            error: function () {
                alert("新增失败");
            }
        })
    }

    function delWebsite(obj) {
        var id = $(obj).attr("id");
        $.ajax({
            type: 'delete',
            url: "/website/" + id,
            success: function () {
                window.location.reload();
                alert('删除成功')
            },
            error: function () {
                alert('删除失败')
            }
        })
    }
</script>
